<template>
  <el-collapse-transition>
    <ul class="subMenu" v-show="hide ? true : isShowCode === menuCode">
      <!-- :style="{ top: getTop(index, item.children.length) }" -->
      <li
        class="subMenu-item"
        :style="{
          textIndent: left + 'px',
        }"
        v-for="(subItem, subIndex) in list"
        :key="subIndex"
        :class="{
          subactive:
            currentSubUrl == subItem.menuAddr ||
            (currentSubUrl != subItem.menuAddr &&
              (!subItem.children || subItem.children.length == 0) &&
              $route.meta &&
              $route.meta.pCode &&
              subItem.menuCode &&
              $route.meta.pCode.indexOf(subItem.menuCode) > -1),
          hasChild:
            subItem.children &&
            subItem.children.length != 0 &&
            isShowCode_ === subItem.menuCode,
          open: isShowCode_ === subItem.menuCode,
        }"
        @click.stop="subMeuClick(subItem, subIndex)"
        @mouseenter="hide ? showSub(subItem, subIndex, 'in') : null"
        @mouseleave="hide ? showSub(subItem, subIndex, 'out') : null"
      >
        <div
          :class="{
            active:
              (!hide && isShowCode_ === subItem.menuCode) ||
              ($route.meta &&
                $route.meta.pCode &&
                $route.meta.pCode.indexOf(subItem.menuCode) > -1),
          }"
        >
          {{ subItem.menuName }}
        </div>
        <i
          class="el-icon-arrow-down"
          v-if="subItem.children && subItem.children.length != 0"
        ></i>
        <template v-if="subItem.children && subItem.children.length != 0">
          <mainAsideChild
            :class="{ hasHideChild: hide }"
            :menuCode="subItem.menuCode"
            :menuAddr="subItem.menuAddr"
            :isShowCode="isShowCode_"
            :currentUrl="currentUrl"
            :currentSubUrl="currentSubUrl"
            :list="subItem.children"
            :left="hide ? 0 : left + 28"
            :close="close"
            :hide="hide"
            @click="subMeuClick"
          />
        </template>
      </li>
    </ul>
  </el-collapse-transition>
</template>

<script>
export default {
  name: 'mainAsideChild',
  props: {
    hide: {
      type: Boolean,
      default: false,
    },
    menuCode: {
      type: [String, Number],
      default: null,
    },
    menuAddr: {
      type: String,
      default: null,
    },
    isShowCode: {
      type: [String, Number],
      default: null,
    },
    currentUrl: {
      type: [String, Number],
      default: null,
    },
    currentSubUrl: {
      type: [String, Number],
      default: null,
    },
    list: {
      type: Array,
      default() {
        return []
      },
    },
    left: {
      type: Number,
      default: 0,
    },
    close: {
      type: Boolean,
    },
  },
  data() {
    return {
      isShowCode_: -2,
    }
  },
  watch: {
    close() {
      this.menuCode &&
      this.$route.meta &&
      this.$route.meta.pCode &&
      this.$route.meta.pCode.indexOf(this.menuCode) > -1
        ? null
        : this.showSub({}, null, 'out')
    },
    hide() {
      this.judgeOpen()
    },
  },
  methods: {
    showSub(item, index, type) {
      this.isShowCode_ = type == 'out' ? -2 : item.menuCode
    },
    subMeuClick(subItem, subIndex, type) {
      if (subItem.children && subItem.children.length > 0) {
        this.hide
          ? null
          : this.showSub(
              subItem,
              subIndex,
              this.isShowCode_ == subItem.menuCode ? 'out' : 'in'
            )
        return
      }
      this.$emit('click', subItem, subIndex, this.menuCode)
      type === this.isShowCode_ ? null : this.showSub(subItem, subIndex, 'out')
    },
    judgeOpen() {
      if (this.hide) {
        this.isShowCode_ = -2
        return
      }
      for (let i in this.list) {
        if (
          this.$route.meta &&
          this.$route.meta.pCode &&
          this.list[i].menuCode &&
          this.$route.meta.pCode.indexOf(this.list[i].menuCode) > -1
        ) {
          this.isShowCode_ = this.list[i].menuCode
          break
        }
      }
    },
  },
  created() {},
  mounted() {
    this.judgeOpen()
  },
  destroyed() {},
}
</script>

<style scoped>
.subMenu {
  width: 100%;
  line-height: 50px;
  text-align: left;
  box-sizing: border-box;
  display: block;
  font-size: 14px;
}
li.subMenu-item {
  cursor: pointer;
  /* padding-left: 70px; */
  box-sizing: border-box;
  position: relative;
}
li.subMenu-item:last-child {
  border-bottom: 0;
}
/* li.subMenu-item:not(.hasChild):hover,
li.subMenu-item > .active:hover {
  background-color: rgba(54, 71, 145, 0.56);
}
li.subMenu-item > .active {
  background-color: rgba(54, 71, 145, 0.3);
} */
li.subMenu-item.subactive {
  box-sizing: border-box;
  /* background-color: #364791 !important; */
}
.el-icon-arrow-down {
  position: absolute;
  right: 20px;
  top: 18px;
  transform: rotate(0deg);
  transition: all 0.2s ease;
  text-indent: 0;
}
.open.subMenu-item .el-icon-arrow-down {
  transform: rotate(-180deg);
}
/* .menus .menuList.open .subMenu {
  background-color: rgba(54, 71, 145, 0.3);
} */
.barSmall .subMenu {
  position: absolute;
  left: 181px;
  top: 0;
  opacity: 0;
  width: 180px;
  background-color: #fff !important;
  border-radius: 5px;
  z-index: -1;
  box-shadow: 0px 2px 10px 0px rgba(226, 234, 250, 0.8);
  transform: translateX(-10px) scale(0.8);
  transition: all 0.2s;
}
.barSmall .menus .menuList:hover > div > .subMenu,
.barSmall .menus .subMenu-item:hover > .subMenu,
.barSmall .menus .subMenu-item.open > .subMenu {
  opacity: 1;
  z-index: 11;
  transform: scale(1);
}
/* .menus .menuList.open.active .subMenu {
  background-color: rgba(54, 71, 145, 0.2);
} */
.barSmall li.subMenu-item {
  text-align: center;
}
.barSmall .subMenu-item .el-icon-arrow-down {
  right: 12px;
}
.barSmall .open.subMenu-item .el-icon-arrow-down {
  transform: rotate(-90deg);
}
/* .barSmall li.subMenu-item > .active,
.barSmall li.subMenu-item.subactive,
.barSmall .menus .menuList.open .subMenu {
  background-color: #fff !important;
}
.barSmall li.subMenu-item.subactive,
.barSmall li.subMenu-item:not(.hasChild):hover,
.barSmall li.subMenu-item > .active,
.barSmall .menus .menuList .subMenu.open,
.barSmall .open.subMenu-item .el-icon-arrow-down {
  color: #5068d1;
  background-color: #fff !important;
} */
.hasHideChild::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 4px;
}
</style>
